<template>
    <div>
        <van-tabbar v-model="active" active-color="rgb(252, 102, 39)" inactive-color="#646566" route>
            <van-tabbar-item to="/home">
                <!-- <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template> -->
                <template #icon="props">
                    <!-- <svg class="icon nav" aria-hidden="true">
                        <use :xlink:href="props.active ? '#icon-home-sel':'#icon-home'"></use>
                    </svg> -->
                    <geek-icon :name="props.active?'home-sel':'home'"></geek-icon>
                </template>
                <span>首页</span>
            </van-tabbar-item>
           <van-tabbar-item to="/question">
                <!-- <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template> -->
                <template #icon="props">
                     <geek-icon :name="props.active?'qa-sel':'qa'"></geek-icon>
                </template>
                <span>问答</span>
            </van-tabbar-item>
           <van-tabbar-item to="/video">
                <!-- <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template> -->
                <template #icon="props">
                    <geek-icon :name="props.active?'video-sel':'video'"></geek-icon>
                </template>
                <span>视频</span>
            </van-tabbar-item>
           <van-tabbar-item to="/mine">
                <!-- <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template> -->
                <template #icon="props">
                    <geek-icon :name="props.active?'mine-sel':'mine'"></geek-icon>
                </template>
                <span>我的</span>
            </van-tabbar-item>

        </van-tabbar>
    </div>
</template>
<script>
// import geekIcon from './geek-icon.vue'
export default {
  data () {
    return {
      active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png'
      }
    }
  }
}
</script>

<style scoped lang="less">
// 当你直接修改vantUI中样式的时候  是没有办法修改的，需要进行穿透。
/deep/.van-tabbar-item__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav {
    font-size: 20px;
    margin-bottom: 5px;
}
</style>
